{% extends 'base.html' %}

{% block title %}消息柜 - 安全消息传递{% endblock %}

{% block content %}
<div class="container">
    <div class="header">
        <h1>消息柜</h1>
        <p class="subtitle">选择一个消息柜来存储或获取消息</p>
    </div>

    <div class="lockers-container">
        {% for locker in lockers %}
        <div class="locker-card" onclick="window.location.href='{{ url_for('locker_detail', locker_id=locker.id) }}'">
            <div class="locker-number">{{ locker.id }}</div>
            <div class="locker-name">{{ locker.name }}</div>
            <div class="locker-capacity">
                <div class="capacity-bar">
                    <div class="capacity-fill" style="width: {{ (locker.get_used_space() / locker.capacity) * 100 }}%;"></div>
                </div>
                <div class="capacity-text">
                    {{ locker.get_used_space() }}/{{ locker.capacity }}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="back-section">
        <a href="{{ url_for('index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> 返回首页
        </a>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 根据使用率设置颜色
        document.querySelectorAll('.capacity-fill').forEach(function(el) {
            const width = parseFloat(el.style.width);
            if (width >= 90) {
                el.classList.add('capacity-critical');
            } else if (width >= 70) {
                el.classList.add('capacity-warning');
            } else {
                el.classList.add('capacity-good');
            }
        });
    });
</script>
<script src="{{ url_for('static', filename='js/locker.js') }}"></script>
{% endblock %}
